<script>
import {deleteGroup, listGroups, saveGroup} from "../../../api/group";
import {ElMessage} from "element-plus";

export default {
    name: "Group",
    data() {
        return {
            showList: true,
            groups: [],
            item: {}
        }
    },
    methods: {
        newGroup() {
            this.showList = false
        },
        deleteGroup(scope) {
            deleteGroup(scope.row.id)
                .then(res => {
                    if (res.code === 200) {
                        ElMessage.success("删除成功")
                        //刷新
                        this.groups.splice(scope.$index, 1)
                    } else ElMessage.error("删除失败")
                })
        },
        editGroup(scope) {
            this.showList = false;
            this.item = scope.row
        },
        getGroups() {
            listGroups(this.user.userId)
                .then(res => {
                    this.groups = res.data;
                })
        },
        saveGroups() {
            this.item.ownerId = this.user.userId;
            saveGroup(this.item)
                .then(res => {
                    if (res.code === 200) {
                        ElMessage.success("保存成功")
                        this.showList = true;
                        this.getGroups()
                    } else ElMessage.error("保存失败")
                })
        }
    },
    mounted() {
        this.getGroups();
    },
    computed: {
        user() {
            return this.$store.state.userInfo;
        }
    }
}
</script>
<template>
    <div class="flex row align-center center group-box">
        <div class="flex column align-center group-left">
            <div class="flex column  " style="width: 100%">
                <h2>专栏管理</h2>
                <el-divider style="margin: 0!important;"/>
            </div>
            <div v-if="showList" class="flex column" style="width: 100%;height: 100%">
                <div class="flex row space-between" style="height: 90px;width: 100%">
                    <div class="flex center align-center">
                        文章专栏，他人可以订阅专栏
                    </div>
                    <div class="flex" style="justify-content: flex-end;align-items: flex-end">
                        <el-button @click="newGroup" class="newGroup">新建</el-button>
                    </div>

                </div>
                <el-table :data="groups" style="width: 100%;">
                    <el-table-column type="index" label="序号" width="60px"/>
                    <el-table-column prop="name" label="类别名称"/>
                    <el-table-column prop="description" label="描述"/>
                    <el-table-column prop="blogCount" label="文章数" width="90px"/>
                    <el-table-column prop="subCount" label="订阅数" width="90px"/>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button type="text" size="small">管理</el-button>
                            <el-button @click="editGroup(scope)" type="text" size="small">编辑</el-button>
                            <el-button @click="deleteGroup(scope)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--            编辑新增专栏-->
            <div v-if="!showList" class="flex column align-center" style="width: 100%;height: 100%">
                <div @click="showList=true" class="flex row  align-center"
                     style="cursor: pointer;margin-bottom: 30px;width: 100%">
                    <!--                    <back style="width: 30px;height: 60px" />-->
                    <i class="iconfont icon-back" style="font-size: 15pt"></i>
                    <span>返回分类列表</span>
                </div>
                <div class="flex column" style="width: 60%">
                    <div class="flex row  align-center" style="margin-bottom: 30px">
                        <span style="width: 90px">专栏名称:</span>
                        <el-input placeholder="专栏的名称" v-model="item.name"/>
                    </div>
                    <div class="flex row " style="margin-bottom: 30px">
                        <span style="width: 90px">专栏描述:</span>
                        <el-input placeholder="对于专栏的介绍" v-model="item.description" type="textarea"/>
                    </div>
                    <div class="flex row flex-end " style="margin-bottom: 30px">
                        <el-button @click="saveGroups" class="newGroup">提交</el-button>
                    </div>
                </div>

            </div>
        </div>
        <!--        右边其他区域 暂时不用-->
        <!--        <div class="flex column align-center" style="height: 100%;width: 20%;background: #6e0841;padding: 0 30px">
                </div>-->
    </div>
</template>

<style scoped>

.group-box {
    height: 100%;
    width: 100%
}

.group-left {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}

.newGroup {
    height: 25px;
    width: 100px;
    border-radius: 20px;
    border: 0;
    background: #f65d4e;
    color: white;
}

.newGroup:hover {
    background: #ef4736;
}
</style>
